<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_234')}}</h2>
            <div class="personCon"  @click="isShow=false">
                <div class="leftpanel">
                    <h2 class="persontitle">{{$t('l.personal_234')}}</h2>
                    <div class="rechargebar">
                        <div class="coinbar">
                            <div class="rechargecoin" @click.stop="showlist">
                                <img :src="coinIntro.icon" class="coinlogo">
                                <span>{{coinIntro.code}}</span>
                                <i></i>
                            </div>
                            <drop-down @inputValue="getInputValue" :placeholder="placeholder" @item-click="itemClick" :itemlist="coinlist" :nodatatext="nodatatext" :isShow="isShow" style="width:349px;top:78px;"></drop-down>
                        </div>
                        <div class="rechargeaddress">
                            <p class="addrtitle">划转方向</p>
                            <div class="transferbox">
                                <div class="direction">
                                    <div class="from">
                                        <span class="fl">从</span>
                                        <select class="accountselect">
                                            <option>资金账户</option>
                                            <option>杠杆账户</option>
                                            <option>合约账户</option>
                                        </select>
                                    </div>
                                    <div class="from to">
                                        <span class="fl">到</span>
                                        <select class="accountselect">
                                            <option>资金账户</option>
                                            <option>杠杆账户</option>
                                            <option>合约账户</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="switch"></div>
                            </div>
                            <p class="addrtitle">划转数量</p>
                            <input class="addrput alignright"  placeholder="可用余额: 0.00000000 BTC" style="margin-bottom:0;">
                            <div class="transferinfo">
                                <span class="fl">手续费 0.0001 BTC</span>
                                <a class="fr">全部划转</a>
                            </div>
                            <a class="btn changebtn">划转</a>
                        </div>
                    </div>
                </div>
                <div class="rightpanel">
                    <div class="tipbox">
                        <p class="tiptitle">{{$t('l.personal_64')}}</p>
                        <p class="tiptext">1. 您可以在杠杆账单页查看资金划转记录。</p>
                        <p class="tiptext">2. 资金划转成功后将实时到账。</p>
                        <p class="tiptext">3. 资金划转无需手续费。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
import {compute} from '@/assets/js/compute';
import dropDown from "@/components/dropdown";
export default {
    components: {
        PersonalHeader,
        PersonalSide,
        dropDown
    },
    watch: {
        $route(){
            this.querycoin= this.$route.query.coin
        },
        querycoin(newValue, oldValue) {
           this.changecoin();
        }
    },
    inject:['reload'],
    data() {
        return {
            nodatatext: this.$t('l.add_37'),
            isShow:false,
            coinlist:[],
            datalist:[],
            coinIntro:"",
            tagList:[],
            addr:"",
            amount:"",
            balance:"",
            verifyCode:"",
            sendAuthCode:true,
            auth_time:120,
            ischeck:false,
            status:'phone',
            account:"",
            deviceType:"",
            querycoin:"",
            onceToken:"",
            currencyId:"",
            isWithdrawable:0,
            placeholder:this.$t('l.add_130'),
            idType:1
        }
    },
    created(){
        this.getCoins(); 
        let intro = this.$store.state.userintro;
        this.idType = intro.idType;
        if(intro.gaEnabled==1){
            this.status = "ga"
        }else if(intro.phoneEnabled==1){
            this.status = "phone"
        }else if(intro.emailEnabled==1){
            this.status = "email"
        }
        if(this.status=="phone"){
            this.account = this.$store.state.userintro.cellPhone
        }else if(this.status=="email"){
            this.account = this.$store.state.userintro.email
        }
        
    },
    methods:{
        
        itemClick(data) {
            this.currencyId = data.currencyId;
            this.findCoinAssets(data.currencyId);
            this.isShow = false;
            this.addr = "";
        },
        getInputValue(searchvalue) {
            if(searchvalue==""){
                this.coinlist = this.datalist;
                return;
            }
            let coinlist = [];
            // 请求获取筛选列表
            this.datalist.forEach((item,index)=>{
                if(item.code.indexOf(searchvalue.toUpperCase()) != -1){
                    coinlist.push(item);
                }
            })
            this.coinlist = coinlist;
        },
        showlist(){
            this.isShow = !this.isShow;
        },
        changecoin(){
            let that = this;
            if(that.$route.query.coin){
                that.querycoin = that.$route.query.coin;
                that.coinlist.forEach((item,index)=>{
                    if(item.code == that.querycoin){
                        that.itemClick(item);
                    }
                })
            }
        },
        //获取币种列表
        async getCoins(){
            let that = this;
            let res = await api.coinsList({isWithdraw:true});
            if(res.data.code==0){
                that.coinlist = res.data.data;
                that.datalist = res.data.data;
                if(that.$route.query.coin){
                    that.changecoin();
                }else{
                    that.currencyId = res.data.data[0].currencyId;
                    that.findCoinAssets(res.data.data[0].currencyId);
                }
            }
        },
        //获取币种信息
        async findCoinAssets(id){
            let that = this;
            let res = await api.findByCurrencyId({currencyId:id});
            if(res.data.code==0){
                that.coinIntro = res.data.data;
                if(that.coinIntro.withdrawalFee < Number(that.coinIntro.withdrawalMinFee)){
                    that.coinIntro.fee = that.coinIntro.withdrawalMinFee
                }else{
                    that.coinIntro.fee = that.coinIntro.withdrawalFee;
                }
                that.coinIntro.totalprice = compute.dcmAdd(Number(that.coinIntro.frozenAmount),Number(that.coinIntro.availableAmount))
                if(that.coinIntro.withdrawTips.length>0){
                    that.coinIntro.tips = that.coinIntro.withdrawTips[0].content;
                }
                if(that.coinIntro.isWithdrawable==0){
                    that.$layer.msg(that.$t('l.add_92'));
                }
                that.isWithdrawable = that.coinIntro.isWithdrawable;
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
    },
    mounted(){
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .rechargebar{
        width:712px;
        margin:58px auto;
        .coinbar{
            float:left;
            width:346px;
            position:relative;
        }
        .rechargecoin{
            float:left;
            width:346px;
            height:80px;
            border-radius:6px;
            border:1px solid rgba(221,224,235,1);
            padding:20px 25px;
            box-sizing: border-box;
            .coinlogo{
                float:left;
                width:40px;
                height:40px;
                margin-right:21px;
            }
            span{
                float:left;
                font-size:20px;
                font-familyA:"OpenSans-Semibold";
                font-weight:600;
                color:rgba(51,56,94,1);
                line-height:27px;
                padding-top:8px;
            }
            i{
                float:right;
                margin-right:10px;
                margin-top:16px;
                width:14px;
                height:8px;
                background:url(../../assets/images/arrow_btm.png) no-repeat center;
            }
        }
        .balancecoin{
            float:right;
            p{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:10px;
                span{
                    padding-left:30px;
                    font-familyA:"OpenSans";
                }
            }
        }
        .rechargeaddress{
            width:100%;
            background:rgba(247,248,252,1);
            border-radius:4px;
            border:1px solid rgba(233,238,244,1);
            box-sizing:border-box;
            padding:40px 47px 60px 30px;
            clear:both;
            position: relative;
            top: 40px;
            .transferbox{
                overflow:hidden;
                padding-bottom:22px;
                .direction{
                    float:left;
                    width:89%;
                    height:85px;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                    border:1px solid rgba(221,224,235,1);
                    padding:0 20px;
                    box-sizing:border-box;
                    .from{
                        padding:9px 0;
                        &.to{
                            border-top:1px solid #DDE0EB;
                        }
                        span{
                            float:left;
                            font-size:14px;
                            color:#33385E;
                            line-height:24px;
                            padding-right:40px;
                        }
                        .accountselect{
                            font-size:14px;
                            color:#33385E;
                            line-height:20px;
                            overflow:hidden;
                            width:80%;
                            border:none;
                            outline:none;
                        }
                    }
                }
                .switch{
                    float:right;
                    width:48px;
                    height:85px;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                    border:1px solid rgba(221,224,235,1);
                    background:#fff url(../../assets/images/transfer.png) no-repeat center;
                    background-size:24px 24px;
                    cursor: pointer;
                }
            }
            .transferinfo{
                overflow:hidden;
                padding-top:7px;
                span{
                    font-size:14px;
                    color:#33385E;
                    line-height:20px;
                }
                a{
                    font-size:14px;
                    color:#7373F7;
                    line-height:20px;
                    cursor:pointer;
                }
            }
            .addrtitle{
                font-size:16px;
                font-weight:500;
                color:rgba(51,56,94,1);
                line-height:22px;
                padding-bottom:8px;
                span{
                    color:#7373F7;
                    padding-left:18px;
                }
            }
            .addrput{
                width:100%;
                height:40px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px solid rgba(221,224,235,1);
                line-height:40px;
                text-indent:10px;
                font-size:14px;
                font-weight:500;
                color:rgba(51,56,94,1);
                line-height:24px;
                margin-bottom:24px;
                box-sizing: border-box;
                &.alignright{text-align: right;padding-right:10px;}
            }
            .disabledput{
                width:307px;
                height:40px;
                background:rgba(249,249,255,1);
                border-radius:4px;
                border:1px solid rgba(221,224,235,1);
                float:left;
                box-sizing: border-box;
                padding:0 10px;
                span{
                    font-size:14px;
                    font-weight:500;
                    color:rgba(51,56,94,1);
                    line-height:40px;
                }
            }
            .availableput{
                width:307px;
                height:40px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px solid rgba(221,224,235,1);
                float:right;
                box-sizing: border-box;
                padding:0 10px;
                span{
                    font-size:14px;
                    font-weight:500;
                    color:rgba(51,56,94,1);
                    line-height:40px;
                }
                input{
                    overflow:hidden; 
                    font-weight:500;
                    color:rgba(51,56,94,1);
                    line-height:40px;
                    text-align:right;
                    width: 68%;
                }
            }
            .changebtn{
                width: 100%;
                height: 40px;
                margin-top: 50px;
                line-height: 40px;
            }
        }
    }
    .rightpanel{
        .tipbox{
            background:rgba(240,242,253,1);
            border-radius:4px;
            border:1px solid rgba(115,115,247,0.5);
            padding:34px 20px;
            box-sizing: border-box;
            height: 100%;
            overflow-y: scroll;
            .tiptitle{
                line-height:24px;
                font-weight:500;
                color:rgba(51,56,94,1);
                font-size:16px;
                padding-left:34px;
                background:url(../../assets/images/tip.png) no-repeat left center;
                margin-bottom:26px;
            }
            .tiptext{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:24px;
            }
        }
    }
}
</style>



